<template>
	<view class="page">
		<u-navbar :autoBack="true" :placeholder="true" :border="false" v-if="studentId">
			<template #center>
				<u-text suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" align="center" text="李同学" size="32rpx"
					color="#333" @click="showStudentPopup = !showStudentPopup"></u-text>
			</template>
		</u-navbar>
		<u-navbar :autoBack="true" :placeholder="true" :border="false" v-else>
			<template #center>
				<u-text suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" align="center" text="5以内的加减法" size="32rpx"
					color="#333" @click="showPopup = !showPopup"></u-text>
			</template>
		</u-navbar>
		<view class="bg-white padding" v-if="studentId">
			<u-text suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" align="center" text="5以内的加减法" size="32rpx"
				color="#333" @click="showPopup = !showPopup"></u-text>
		</view>
		<view class="bg-white padding">
			<view class="flex">
				<u-text iconStyle="margin-left: 10rpx;font-size:18rpx;color:#666" suffixIcon="arrow-down-fill" text="题型"
					size="26rpx" color="#666" bold @click="showQuestionTypePicker = !showQuestionTypePicker"></u-text>
				<u-text iconStyle="margin-left: 10rpx;font-size:18rpx;color:#666" suffixIcon="arrow-down-fill" text="难度"
					size="26rpx" color="#666" bold @click="showDifficultyPicker = !showDifficultyPicker"></u-text>
				<u-text iconStyle="margin-left: 10rpx;font-size:18rpx;color:#666" suffixIcon="arrow-down-fill" text="区域"
					size="26rpx" color="#666" bold @click="showAreaPicker = !showAreaPicker"></u-text>
				<u-icon name="/static/image/teacher/icon-reload.png" size="36rpx" color="#333"></u-icon>
			</view>
		</view>
		<view class="main">
			<view class="bg-white radius-lg padding">
				<view class="flex">
					<view class="flex-1">
						<u-text text="单选题 偏难" size="32rpx" color="#333" bold></u-text>
					</view>
					<view>
						<u-text align="right" text="2024-山西太原·一模" size="32rpx" color="#333" bold></u-text>
					</view>
				</view>
				<view>
					<image src="/static/image/img-math.png" mode="widthFix" style="width: 100%;height: 100%;">
					</image>
				</view>
				<u-divider></u-divider>
				<view class="flex align-center justify-between">
					<view class="flex-1">
						<u-radio label="未选中" activeColor="#0060E6"></u-radio>
					</view>
					<view class="flex gap-sm">
						<u-button :customStyle="{ color: themePrimary, width: '120rpx', height: '60rpx' }" :color="themeTertiary"
							shape="circle" text="上移"></u-button>
						<u-button :customStyle="{ color: themePrimary, width: '120rpx', height: '60rpx' }" :color="themeTertiary"
							shape="circle" text="下移"></u-button>
					</view>
				</view>
			</view>

			<u-picker :closeOnClickOverlay="true" :show="showQuestionTypePicker" :columns="questionTypeList"
				@confirm="handleQuestionTypePickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showDifficultyPicker" :columns="difficultyList"
				@confirm="handleDifficultyPickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showAreaPicker" :columns="areaList"
				@confirm="handleAreaPickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>
		</view>
		<view class="footer gap">
			<u-button customStyle="color:#333" size="large" shape="circle" color="#EEEEEE" text="预览"
				@click="toPreviewClick"></u-button>
			<u-button size="large" shape="circle" :color="themePrimary" text="保存" @click="save"></u-button>
		</view>
		<PopupBox :show="showPopup" :top="220" @close="showPopup = false">
			<view class="popup-item" v-for="i in 4" :key="i" @click="handleKnowledgeClick(i)">
				<u-text align="center" text="5以内的加减法" size="32rpx" color="#333"></u-text>
			</view>
		</PopupBox>

		<PopupBox :show="showStudentPopup" :top="160" @close="showStudentPopup = false">
			<view class="popup-item" v-for="i in 4" :key="i" @click="handleStudentClick(i)">
				<u-text align="center" text="赵同学" size="32rpx" color="#333"></u-text>
			</view>
		</PopupBox>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
import PopupBox from '@/components/PopupBox/index.vue';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const id = ref(0);
const studentId = ref(0);
const showPopup = ref(false);
const showQuestionTypePicker = ref(false);
const showDifficultyPicker = ref(false);
const showStudentPopup = ref(false);
const showAreaPicker = ref(false);
const questionTypeList = ref([['单选题', '多选题', '判断题']]);
const difficultyList = ref([['偏易', '偏难', '偏中']]);
const areaList = ref([['全国', '山西', '太原']]);
onLoad((options) => {
	id.value = options.id;
	studentId.value = options.studentId;
});

const toPreviewClick = () => {
	uni.navigateTo({
		url: `/pages/teacher/createExercise/preview?id=${id.value}`
	});
}

const save = () => {
	console.log('save')
	uni.showToast({
		title: '保存成功',
		icon: 'none'
	})
}

const handleKnowledgeClick = (item) => {
	console.log('item', item)
	showPopup.value = false
}

const handleQuestionTypePickerConfirm = (e) => {
	console.log('e', e)
	showQuestionTypePicker.value = false
}

const handleDifficultyPickerConfirm = (e) => {
	console.log('e', e)
	showDifficultyPicker.value = false
}

const handleAreaPickerConfirm = (e) => {
	console.log('e', e)
	showAreaPicker.value = false
}

const handlePickerCancel = () => {
	showQuestionTypePicker.value = false
	showDifficultyPicker.value = false
	showAreaPicker.value = false
}

const handleStudentClick = (item) => {
	console.log('item', item)
	showStudentPopup.value = false
}
</script>
<style scoped lang="scss">
.student-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40rpx;
	padding: 30rpx;
}

.student-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.popup-item {
	padding: 20rpx 40rpx;
}

.footer {
	box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(234, 245, 255, 1);
}
</style>
